@extends('family::layout')

@section('title', '评测列表')

@section('content')
    <div class="content-header sty-one">
        <a href="{{ route("family.training.index", ['child_id'=>$child->id, 'grade_id'=>$data['grade_id']]) }}">
            <span class="category label label-default @if(!isset($data['category_id']) || empty($data['category_id'])) label-success @endif ">
                全部
            </span>
        </a>
        @foreach($categories as $v)
            <a href="{{ route("family.training.index", ['child_id'=>$child->id, 'grade_id'=>$data['grade_id'], 'category_id'=>$v->id]) }}">
                <span class="category label label-default @if(isset($data['category_id']) && $data['category_id'] == $v->id) label-success @endif">
                     {{ $v->name }}
                </span>
            </a>
        @endforeach
    <form method="get">
            <input type="hidden" id="grade_id" name="grade_id" value="{{ $data['grade_id'] }}" />
            <input type="hidden" id="category_id" name="category_id" value="{{ isset($data['category_id']) ? $data['category_id'] : '' }}" />
    </form>
    </div>

    <div class="card border-no">
        <div class="col-lg-12 col-sm-12 col-xs-12">
            <canvas id="canvas"></canvas>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th scope="col">干预项目</th>
                        <th scope="col">用时</th>
                        {{--<th scope="col">干预结果</th>--}}
                        <th scope="col">开始时间</th>
                        <th scope="col">详情</th>
                    </tr>
                    </thead>
                    <tbody>
                    @if(isset($list))
                        @foreach($list as $idx => $item)

                                <tr onclick="location.href='{{ route('family.training.view', ['id' => $item->id]) }}';">
                                    <td><a href="{{ route('family.training.historybygame', ['child_id' => $child->id, 'game_id' => $item->game_id]) }}"> {{ $item->game->name }}</a></td>
                                    <td>{{ $item->use_time }}</td>
{{--                                    <td>
                                        @if($item->result ==1)
                                        <span class="success">成功</span>
                                        @else
                                        <span class="fail">失败</span>
                                        @endif
                                    </td>--}}
                                    <td>{{ $item->start_time }}</td>
                                    <td>
                                        <a href="{{ route('family.training.view', ['id' => $item->id]) }}">
                                            <span class="pull-right badge bg-green-active">&gt;</span>
                                        </a>
                                    </td>
                                </tr>

                        @endforeach
                    @endif
                    </tbody>
                </table>
            </div>
            <div class="row">
                <div class="clearfix"></div>
                <div class="col-md-12 col-sm-12 col-xs-12 pull-right">
                    @if(isset($list))
                        {{ $list->links() }}
                    @endif
                </div>
            </div>
        </div>
    </div>
@stop
@section('script')
<script>
    $("document").ready(function (){
        changeData();
    });

    //生成chart
    function changeData(){
        let url = "{{route("family.training.ajaxdata", ['child_id'=>$child->id])}}"
        let data = {"grade_id" : $("#grade_id").val()}

        if ($("#category_id").val() > 0){
            data.category_id = $("#category_id").val()
        }

        $.get(url,data,function (backData){
            if (backData.status == 200){
                createChart(backData.data)
            }else {
                console.log(backData);
            }
        })
    }

    function createChart(result){

        var data = [];
        var thisdata = {};
        var faildata = {};


        thisdata.backgroundColor = window.chartColors["red"];
        thisdata.label = "成功次数";
        thisdata.data = result.successed;

        faildata.backgroundColor = window.chartColors["blue"];
        faildata.label = "失败次数";
        faildata.data = result.failed;

        data.push(thisdata);
        data.push(faildata);

        var thisconfig = createConfig(result.labels, data, "干预次数");
        var num = thisdata.data.length;
        if(num > 6){
            $("#canvas").css('height', num * 40);
            console.log($("#canvas").css('height'));
        }

        var ctx = document.getElementById('canvas').getContext('2d');
        var chart = new Chart(ctx, thisconfig);
    }

    function createConfig(labels, data, title) {
        console.log(data);
        return {
            type: 'horizontalBar',
            data: {
                labels:labels,
                datasets: data

            },
            options: {
                responsive: true,
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: title
                },
                maintainAspectRatio: false,

                scales: {
                    xAxes: [{
                        position:'top',
                        gridLines:{
                            display: false
                        },
                        ticks: {
                            beginAtZero: true,
                            stepSize:1
                        }
                    }],
                    yAxes:[{
                        gridLines:{
                            display: false
                        }
                    }]
                }

            }
        };
    }
</script>
@stop